 // 拆分
    // 定义变量保存当前图片的序号
    var ord = 0; //从0开始，0表示第一张图片；
    var oImgs = document.querySelectorAll(".banner-wrap>img");
    var oLis = document.querySelectorAll(".banner-wrap>ul>li");
    var myTimer;
    var oSpanf = document.querySelector(".banner-wrap_f");
    var oSpanr = document.querySelector(".banner-wrap_r");

    
        
    // 1、每隔一秒钟换一张图片（同时豆豆发生变化）
    function autoPlay() {
        myTimer = setInterval(function () {            
            // 跳转到下一张图片
            goImg(ord+1);
        }, 5000);
    }

    // 2、点击豆豆换图片     
    // 其实goImg函数就是显示指定的图片
    function goImg(transOrd){ //4
        // 一、数据处理
        // 1、计算数据
         var outOrd = ord; //2
         ord = transOrd;
        //  2、边界处理
        if(ord<0){
             ord=4;
        }
         if(ord>4){
            ord = 0;
         }

        //二、外观呈现
        // 1、图片进入和离开
           // 1）、出去
            mover03(oImgs[outOrd], "left", -1920, 300);
            // 2）、进入
            oImgs[ord].style.left = "1920px";
            mover03(oImgs[ord], "left", 0, 300);
            //   2、让豆豆的颜色发生变化
            // 1）、出去
            oLis[outOrd].style.backgroundColor = "pink";
            // 2）、进入
            oLis[ord].style.backgroundColor = "red";
    }

    // 3、点击箭头换图片
    // 后退
    function backImg(){
        goImg(ord-1);
    }

    // 前进
    function forwardImg(){        
        goImg(ord+1);
    }


    // 4、鼠标放上去停止，
    function stopPlay(){
         window.clearInterval(myTimer);
    }

    // 5、鼠标离开继续播放， 及时autoPlay


    // 6、超链


    window.onload = function () {
        autoPlay();
        document.querySelector(".banner-wrap").onmouseover = function(){
             stopPlay();
        }

        document.querySelector(".banner-wrap").onmouseout = function(){
             autoPlay();
        }
        // 给每个豆豆绑定事件
        for(let i=0;i<oLis.length;i++){
           oLis[i].onclick = function(){
                goImg(i);
           }
        }
        // 左箭头绑定事件
        oSpanf .onclick = backImg;
        // 右箭头绑定事件
        oSpanr.onclick = forwardImg
    }
